import React from 'react'
import { useState, useEffect } from 'react'
import { beixing, wendu, kafeidou, tangdu } from '../api/state'
import Tab from './tab'
export default function Shop() {
    // 获取杯型的数据
    let [beixings, setBeixings] = useState([]);
    let refreshBeixing = async () => {
      let res = await beixing()
      setBeixings(res.data)
    }
  
    // 获取温度的数据
    let [wendus,setWendus] = useState([]);
    let refreshWendu = async () => {
      let res= await wendu()
      setWendus(res.data)
    }
  
    // 获取咖啡豆的数据
    let [kafeidous,setKafeidous] = useState([])
    let refreshKafeidou = async ()=>{
      let res = await kafeidou()
      setKafeidous(res.data)
    }
  
    // 获取糖度的数据
    let [tangdus,setTangdus] = useState([]);
    let refreshTangdu = async ()=>{
      let res= await tangdu()
      setTangdus(res.data)
    }
    useEffect(()=>{
      refreshBeixing()
      refreshWendu()
      refreshKafeidou()
      refreshTangdu()
    },[])
  
    return (
      <div>
        <h2>杯型</h2>
        <Tab num={1} conf={beixings} />
        <h2>温度</h2>
        <Tab num={2} conf={wendus} />
        <h2>咖啡豆</h2>
        <Tab num={1} conf={kafeidous} />
        <h2>糖度</h2>
        <Tab num={3} conf={tangdus} />
      </div>
    )
  }